<template>
	<view class="page-index">
		<!-- <u-navbar title-color="#fff" title=" " :background="background" :border-bottom="false" :is-back="false">

		</u-navbar> -->
		<view class="nav-logo u-f-justify" :style="{top:statusBarHeight+'px'}">
			<image src="../../static/image/logo1.png" style="width: 348rpx;height: 50rpx;"></image>
		</view>
		<view class="page-content" v-if="curBanner">
			<view style="position: relative;">
				<u-swiper @change="bannerChange" @click="toBanner(curBanner)" name="picUrl" :list="bannerList"
					:height="bannerHeight">
				</u-swiper>
				<view class="page-btn" @click="toBanner(curBanner)">
					<view class="fz30 u-font-bold c255 u-flex u-f-justify" v-if="curBanner.title">{{curBanner.title}}
					</view>
					<view class="btn1 fz13 u-font-bold" v-if="curBanner.memo">{{curBanner.memo}}</view>
				</view>
			</view>
			<view class="bg-white p12">
				<view class="u-flex u-f-jsb mt18">
					<view class="u-f-justify" @click="toBanner(item)" v-for="(item,index) in bannerListSecond"
						:key="index">
						<image :src="item.picUrl" style="width: 342rpx;height: 194rpx;"></image>
					</view>
				</view>
			</view>
			<view class="p12">
				<view class="u-flex u-f-jsb mb20">
					<span class="u-font-bold fz15">优秀模版</span>
					<span class="u-flex fz12" style="color: #19291C;">
						更多
						<u-icon name="arrow-right"></u-icon>
					</span>
				</view>


				<u-waterfall v-model="flowList" ref="uWaterfall">
					<template v-slot:left="{leftList}">
						<view class="demo-warter pr6" v-for="(item, index) in leftList" :key="index"
							@click="toPage('/pages/product/info?id='+item.spuId)">
							<!-- 警告：微信小程序中需要hx2.8.11版本才支持在template中结合其他组件，比如下方的lazy-load组件 -->
							<u-lazy-load threshold="-450" border-radius="10" :image="item.picUrl"
								:index="index"></u-lazy-load>
							<view class="pt12 pb20 u-flex u-f-jsb">
								<view class="fz14 u-font-bold u-line-1" style="width: 200rpx;">{{item.title}}</view>
								<view class="tmp-btn fz12 u-font-bold">使用模板</view>
							</view>
						</view>
					</template>
					<template v-slot:right="{rightList}">
						<view class="demo-warter pl6" v-for="(item, index) in rightList" :key="index"
							@click="toPage('/pages/product/info?id='+item.spuId)">
							<u-lazy-load threshold="-450" border-radius="10" :image="item.picUrl"
								:index="index"></u-lazy-load>
							<view class="pt12 pb20 u-flex u-f-jsb">
								<view class="fz14 u-font-bold u-line-1" style="width: 200rpx;">{{item.title}}</view>
								<view class="tmp-btn fz12 u-font-bold">使用模板</view>
							</view>
						</view>
					</template>
				</u-waterfall>

			</view>
			<view class="p12 pt24 pb24" style="background: rgba(25,41,28,0.03);">
				<view v-if="bannerVideo.file">
					
						<video controls :src="bannerVideo.file" style="width: 100%;height:394rpx"></video>
				</view>
				<image v-else :src="bannerVideo.picUrl" style="width: 100%;" mode="widthFix"></image>
			</view>
			<view class="p12 pt24 pb24">
				<view>
					<u-swiper @change="bannerBrandChange" @click="toBanner(curBannerBrand)" name="picUrl" :list="brandList" height="420">
					</u-swiper>
				</view>
				<view class="mt40">
					<image src="../../static/image/logo2.png"
						style="width: 388rpx;height: 64rpx;display: block;margin: 0 auto;;"></image>
				</view>
				<view class="u-flex u-f-justify mt38">

					<view class="pt2 pb2" style="border-top: 1px solid #19291C;border-bottom: 1px solid #19291C;">
						100%正品保证
					</view>
				</view>
				<view class="u-flex u-f-jsb mt40">
					<view class="" style="text-align: center;" v-for="(item,index) in otherList" :key="index" @click="toActOther(item)">
						<image :src="item.picUrl" class="w26 h26"></image>
						<view class="fz12 mt5">
							<view class="mb2">{{item.title}}</view>
							<view v-if="item.memo">{{item.memo}}</view>
						</view>

					</view>
				</view>
			</view>
		</view>


		<u-popup v-model="showLogin" mode="center" border-radius="20" :closeable="false">
			<Login @close="showLogin=false" @sureLogin="showLogin=false"></Login>
		</u-popup>

		<u-tabbar active-color="#70B52C" @change="tabbarChange" v-model="curTab" :list="tabbarList"
			:mid-button="true"></u-tabbar>
	</view>
</template>

<script>
	import Login from "@/components/login/index.vue"
	export default {
		components: {
			Login
		},
		data() {
			return {
				showLogin: false,
				keyword: '',
				curTab: 0,
				curBannerBrand:{},
				bannerVideo: {},
				search: {},
				brandList: [],
				otherList: [],
				// 选择
				statusBarHeight: 20,
				curBanner: {},
				bannerHeight: 200,

				curTab: 1,
				loadStatus: 'loadmore',
				flowList: [],
				list: [],

				adListAll: [],
				bannerList: [],
				bannerListSecond: [],
			}
		},
		computed: {
			tabbarList() {
				return this.$store.state.tabbarList || '';
			},
		},
		onLoad(e) {
			this.$nextTick(() => {
				this.initData()

				this.$api.adList({
					position: 1
				}, res => {
					if (res.code == 200) {
						this.bannerList = res.data;
						this.curBanner = this.bannerList[0]
					}
				})
				this.$api.adList({
					position: 2
				}, res => {
					if (res.code == 200) {
						this.bannerListSecond = res.data;
					}
				})
				this.$api.adList({
					position: 3
				}, res => {
					if (res.code == 200) {
						if (res.data && res.data.length > 0) {

							this.bannerVideo = res.data[0];
						}
					}
				})
				this.$api.adList({
					position: 4
				}, res => {
					if (res.code == 200) {
						this.brandList = res.data;
						this.curBannerBrand = this.bannerList[0]
						
					}
				})
				this.$api.adList({
					position: 5
				}, res => {
					if (res.code == 200) {
						this.otherList = res.data;
					}
				})

			})
			let _this = this;
			uni.getSystemInfo({
				success(res) {
					console.log(res, 123123)
					_this.statusBarHeight = res.statusBarHeight
					_this.bannerHeight = (res.windowHeight)
				}
			})


		},

		onPageScroll(e) {},
		onShow() {},

		methods: {
			toActOther(item){
				if(!item.url){
					return
				}
				
				if (item.url.indexOf('http') >= 0) {
					uni.navigateTo({
						url: `/pages/webview/webview?src=${item.url}`
					})
				}else{
					uni.navigateTo({
						url:item.url
					})
				}
			},
			remove(id) {
				this.$refs.uWaterfall.remove(id);
			},
			clear() {
				this.$refs.uWaterfall.clear();
			},
			toBanner(item) {
				if (!this.$db.get("userToken")) {
					this.showLogin = true
					return
				}
				console.log(item, 121221)
				if (item.url && item.url.indexOf('http') >= 0) {
					uni.navigateTo({
						url: `/pages/webview/webview?src=${item.url}`
					})
				} else {
					if (item.url == '/pages/product/index' || item.url == '/pages/activity/index') {
						uni.switchTab({
							url: item.url
						})
						return
					}
				console.log(item.url, 121221)
					uni.navigateTo({
						url: item.url
					})
				}
			},
			bannerBrandChange(e) {
				this.curBannerBrand = this.brandList[e]
			},
			bannerChange(e) {
				this.curBanner = this.bannerList[e]
			},
			toPage(url) {
				uni.navigateTo({
					url
				})
			},
			initData() {
				this.$api.excellentList({
					pageNo: 1,
					pageSize: 4
				}, res => {
					if (res.code == 200) {
						this.flowList = res.data.list
					}
				})


			},
		}
	}
</script>

<style lang="scss">
	page {
		background: #fff;
	}

	.nav-logo {
		position: fixed;
		top: 44px;
		left: 0;
		z-index: 10;
		right: 0;
		padding: 20rpx 40rpx
	}

	.page-btn {

		position: absolute;
		bottom: 50px;
		left: 0;
		right: 0;
		z-index: 10;
		padding: 30rpx;
		text-align: center;


		.btn1 {

			text-align: center;
			color: #fff;
			display: inline-block;
			margin: 40rpx auto 0;
			padding: 12rpx 64rpx;
			border: 1px solid #fff;
			border-radius: 40px;
		}

	}

	.tmp-btn {
		width: 128rpx;
		height: 50rpx;
		text-align: center;
		line-height: 50rpx;
		background: rgba(44, 153, 66, 0.1);
		border-radius: 8rpx;

		color: #70B52C;
	}

	.page-index {
		position: relative;
	}

	.page-content {
		position: relative;
		z-index: 2
	}
</style>